<template>
  <div class="w-[170px] h-full bg-[#242424]">
    <div v-if="currentRoute">
      <div class="text-white bg-[#2E2E2E] w-full h-[62px] flex justify-center items-center">
        <span class="text-[20px] text-white">{{ currentRoute.meta!.title }}</span>
      </div>
      <SideMenus :routes="currentRoute.children!" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { allRoutes } from '@/router/main';
import { eventBus } from '@/utils/event_bus';
import { RouteRecordRaw } from 'vue-router';
const route = useRoute();
// const router = useRouter()
const currentRoute = ref<RouteRecordRaw>();
const findRoute = (path: string) => {
  for (let index = 0; index < allRoutes.length; index++) {
    const element = allRoutes[index];
    if (path.startsWith(element.path)) {
      currentRoute.value = element;
      return;
    }
  }
};
onBeforeMount(() => {
  eventBus.on('refresh_menu', () => {
    findRoute(route.fullPath);
    // const currentRoute = router.currentRoute.value.path;
    // console.log("currentRoute:", currentRoute);
    
    // router.push({path: '/welcome'})
    // setTimeout(() => {
    //   router.replace(currentRoute)
    // }, 100);
  });
});
watch(
  () => route.fullPath,
  newVal => {
    findRoute(newVal);
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped></style>
